<template>
  <div class="icon-btn">
    <el-button @click="btnClick">
      <div>
        <i :class="icon"></i>
        <span>{{ name }}</span>
      </div>
    </el-button>
  </div>
</template>
<script>
export default {
  props: ['icon', 'name'],
  data() {
    return {};
  },
  mounted() {},
  methods: {
    btnClick() {
      this.$emit('click');
    },
  },
};
</script>
<style lang="less" scoped>
.icon-btn {
  .el-button--small {
    border: none !important;
  }
  i {
    width: 30px;
    height: 30px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(40, 58, 116, 0.1);
    border-radius: 50%;
    line-height: 30px;
    font-size: 15px;
  }
  .el-button:focus,
  .el-button:hover {
    background-color: #ffffff !important;
  }
}
</style>
